<template>
    <div class="help-page">
        <div class="help-content">
            <div id="profile">
                <h1>简介</h1>
            </div>
            <div id="initialization">
                <h1>初始化</h1>
            </div>
            <div id="git-config">
                <h1>git设置</h1>
            </div>
            <div id="system-config">
                <h1>系统参数</h1>
            </div>
            <div id="markdown">
                <h1>笔记应用</h1>
            </div>
            <div id="history">
                <h1>历史记录</h1>
            </div>
        </div>
        <a-anchor class="anchor"
                  :offsetTop="100"
                  :showInkInFixed="true"
                  :getContainer="()=> getContainer()"
        >
            <a-anchor-link href="#profile" title="简介"/>
            <a-anchor-link href="#initialization" title="初始化"/>
            <a-anchor-link href="#git-config" title="git设置"/>
            <a-anchor-link href="#system-config" title="系统参数"/>
            <a-anchor-link href="#markdown" title="笔记应用"/>
            <a-anchor-link href="#history" title="历史记录"/>
        </a-anchor>
        <div style="clear:both"></div>
    </div>
</template>

<script>
    export default {
        data() {
            return {};
        },
        methods: {
            getContainer() {
                return document.querySelector('.app-content')

            },
        },
    }
</script>
<style scoped>
    .help-page {
        padding: 20px;
    }

    .help-content {
        width: calc(100% - 150px);
        float: left;
        height: 1500px;
    }

    .help-content > div {
        min-height: 100px;
        margin: 30px;
    }

    .help-content > div:not(:last-child) {
        border-bottom: 1px solid #d1d1d1;
    }

    .help-content h1 {
        color: #0d1a26;
        font-weight: 500;
        margin-bottom: 20px;
        margin-top: 8px;
        font-size: 30px;
        font-variant: tabular-nums;
        line-height: 38px;
        text-align: center;
    }

    .anchor {
        width: 150px;
        float: right;
        padding-top: 100px;
    }
</style>